<script>
export default {
  name: "TableExamplePage",
  data() {
    return{

      tableData: [
        {
          name: '张飞',
          age: 22,
          sex: '男',
          date: '2024-5-8',
          address: '江苏省南京市'
        },
        {
          name: '张飞',
          age: 22,
          sex: '男',
          date: '2024-5-8',
          address: '江苏省南京市'
        },
        {
          name: '张飞',
          age: 22,
          sex: '男',
          date: '2024-5-8',
          address: '江苏省南京市'
        },
        {
          name: '张飞',
          age: 22,
          sex: '男',
          date: '2024-5-8',
          address: '江苏省南京市'
        },
        {
          name: '张飞',
          age: 22,
          sex: '男',
          date: '2024-5-8',
          address: '江苏省南京市'
        },
      ]
    }
  }

}
</script>

<template>
  <div>
    <el-table :data = "tableData" stripe border>
      <el-table-column label="姓名" width="200">
        <template v-slot="scope">
          <el-tag>{{scope.row.name }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="年龄" prop="age" width="200"></el-table-column>
      <el-table-column label="性别" prop="sex" width="200"></el-table-column>
      <el-table-column label="日期" prop="date" width="200"></el-table-column>
      <el-table-column label="地址" prop="address" width="200"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button type="primary" size="mini" plain icon="el-icon-edit">编辑</el-button>
          <el-button type="danger" size="mini" plain icon="el-icon-delete-solid">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<style scoped>

</style>